<template>
    <div ref="iconRef" class="icon">
        <img :src="icon" ref="imgRef" />
        <img :src="icon" />
        <img :src="icon" />
        <img :src="icon" />
        <img :src="icon" />
        <img :src="icon" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const iconRef = ref(null)
const imgRef = ref(null)
const icon = new URL(`@/assets/svgs/心.svg`, import.meta.url).href
onMounted(() => {
    let timer = null
    let time = 0
    document.addEventListener('mousedown', (e) => {
        time = new Date().valueOf()
        if (!iconRef.value?.style) return
        if (timer) window.clearTimeout(timer)
        timer = window.setTimeout(() => {
            iconRef.value.style.top = e.clientY - 25 + 'px'
            iconRef.value.style.left = e.clientX - 25 + 'px'
            timer = null
        }, 5)
        for (let i = 0; i < iconRef.value.children.length; i++) {
            iconRef.value.children[i].style.opacity = 1
        }
    })
    document.addEventListener('mouseup', (e) => {
        if (!iconRef.value?.style) return
        if (new Date().valueOf() - time > 100) {
            for (let i = 0; i < iconRef.value.children.length; i++) {
                iconRef.value.children[i].style.opacity = 0
            }
        } else window.setTimeout(() => {
            for (let i = 0; i < iconRef.value.children.length; i++) {
                iconRef.value.children[i].style.opacity = 0
            }
        }, 500)
    })
})
</script>

<style scoped lang="scss">
@keyframes maopao {
    0% {
        transform: translateY(0) translateX(0) scale(.1);
        width: 50px;
        height: 50px;
    }

    60% {
        transform: translateY(-50px) translateX(-50px) scale(.7);
        width: 50px;
        height: 50px;
    }


    100% {
        transform: translateY(-150px) translateX(-50px) scale(1);
        width: 50px;
        height: 50px;
    }
}

@keyframes maopao2 {
    0% {
        transform: translateY(0) translateX(0) scale(.1);
        width: 50px;
        height: 50px;
    }

    60% {
        transform: translateY(-50px) translateX(-20px) scale(.7);
        width: 50px;
        height: 50px;
    }

    100% {
        transform: translateY(-150px) translateX(-20px) scale(1);
        width: 50px;
        height: 50px;
    }
}

@keyframes maopao3 {
    0% {
        transform: translateY(0) translateX(0) scale(.1);
        width: 50px;
        height: 50px;
    }

    60% {
        transform: translateY(-50px) translateX(0) scale(.7);
        width: 50px;
        height: 50px;
    }

    100% {
        transform: translateY(-150px) translateX(0) scale(1);
        width: 50px;
        height: 50px;
    }
}

@keyframes maopao4 {
    0% {
        transform: translateY(0) translateX(0) scale(.1);
        width: 50px;
        height: 50px;
    }

    60% {
        transform: translateY(-50px) translateX(20px) scale(.7);
        width: 50px;
        height: 50px;
    }

    100% {
        transform: translateY(-150px) translateX(20px) scale(1);
        width: 50px;
        height: 50px;
    }
}

@keyframes maopao5 {
    0% {
        transform: translateY(0) translateX(0) scale(.1);
        width: 50px;
        height: 50px;
    }

    60% {
        transform: translateY(-50px) translateX(50px) scale(.7);
        width: 50px;
        height: 50px;
    }

    100% {
        transform: translateY(-150px) translateX(50px) scale(1);
        width: 50px;
        height: 50px;
    }
}

.icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    box-shadow: 0 0 10px #e3e5e7;

    >img {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        transition: opacity .5s;
    }

    >img:nth-of-type(1) {
        animation: maopao .5s linear infinite;
        opacity: 0;
    }

    >img:nth-of-type(2) {
        animation: maopao2 .7s linear infinite;
        opacity: 0;
    }

    >img:nth-of-type(3) {
        animation: maopao3 .3s linear infinite;
        opacity: 0;
    }

    >img:nth-of-type(4) {
        animation: maopao4 .9s linear infinite;
        opacity: 0;
    }

    >img:nth-of-type(5) {
        animation: maopao5 .6s linear infinite;
        opacity: 0;
    }

    >img:nth-of-type(6) {
        opacity: 1;
        width: 10px;
        height: 10px;
        top: 20px;
        left: 20px;
    }
}
</style>